<template>
  <div>
    <KForm :model="userInfo" :rules='rules' ref="loginForm">
      <KFormItem label="用户名" prop="username">
        <KInput value="username" placeholder="用户名" />
      </KFormItem>
      <KFormItem label="密码" prop="password">
        <KInput type="password" value="password" placeholder="密码" @subInput='subInput'/>
      </KFormItem>
      <KFormItem >
        <button @click="login">登陆</button>
      </KFormItem>
    </KForm>
  </div>
</template>

<script>
  import KInput from './KInput.vue'
  import KFormItem from './KFormItem.vue'
  import KForm from './KForm.vue'
  export default {
    data() {
      return {
        userInfo: {
          username: '',
          password: ''
        },
        rules:{
          username:[{ required: true, message: '用户名不能为空'}],
          password:[{ required: true, message: '密码不能为空'}]
        }
      }
    },
    components: {
      KInput,
      KFormItem,
      KForm
    },
    methods: {
      aa(){
        alert('aa')
      },
      subInput(text){
        console.log(text)
      },
      login(){
        this.$refs.loginForm.validate((valid)=>{
          console.log(valid)
          if(valid){
            alert('submit')
          }else{
            console.log(error)
          }
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
